<template>
  <div class="app-container addProjectApp ">
       <div  class="type">
          <el-breadcrumb separator-class="el-icon-arrow-right">
                <!-- <el-breadcrumb-item :to="{path:'/entry',name:'entry',params:{courseId:courseId}, query:{anchor:anchor,type:1}}">课程建设</el-breadcrumb-item> -->
                <el-breadcrumb-item :to="{path:'/project/projectList'}" style="font-size: 16px;color: #262626;">项目管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path:'/project/shopList'}" style="font-size: 12px;color: #777777 !important;line-height:52px">商品列表</el-breadcrumb-item>
                <el-breadcrumb-item style="font-size: 12px;color: #777777 !important;line-height:52px">{{projectTitle}}</el-breadcrumb-item>
            </el-breadcrumb>
       </div>
       <div class="header">
            <div class="detailTop clearfloat">
              <!-- <div class="btn">待上架</div> -->
               <div class="imgTop">
                  <i class='icon' :class="[operStatus==0?'BeopenedStatus':operStatus==2?'stopStatus':operStatus==9?'closeStatus':'']">{{operStatus==1?'上架中':operStatus==2?'停业中':operStatus==9?'已下架':'待上架'}}</i>
               </div>
              <h2 style="margin-left:100px;font-size: 18px;color: #262626;line-height: 32px;">{{projectTitle}}</h2>

              <!-- <p class="miueList" :class="getShelfStatus(shelfStatus,'styColor')">{{getShelfStatus(shelfStatus,'desc')}}</p>
              <h2>{{projectTitle}}</h2> -->
            </div>
            <div class="detailTop detailTopNew clearfloat">
              <p>{{projectDetail}}</p>
            </div>
            <div class="detailImgList clearfloat">
                <!-- <p class="font">商品图片：</p> -->
                <div class="imgListAll clearfloat" ref="imgListAll">
                 <div class="imgList" v-for="(item,index) in fileOtherPic" :key=index>
                   <img :src="item.fileUrl" @click="showImg(item)" />
                 </div>
                </div>
            </div>
            <div class="navList clearfloat">
               <!-- <h4 class="h5">可用日期:</h4> -->
               <h4 class="h5 clearfloat">
                 <img src="../../assets/img/riqiShop.png" style="float:left;"/>
                 <span style="float:left;">可用日期</span>
               </h4>
               <div class="input">{{availableDateBegin}}至{{availableDateEnd}}</div>
            </div>
            <div class="navList clearfloat">
               <!-- <h4 class="h5">商品价格:</h4> -->
               <h4 class="h5 clearfloat">
                 <img src="../../assets/img/priceShop.png" style="float:left;"/>
                 <span style="float:left;">商品价格</span>
               </h4>
               <div class="input">
                 <span class="price">{{projectPhone}}</span>
                 <span>元/人</span>
               </div>
            </div>
            <div class="navList clearfloat">
               <!-- <h4 class="h5">优惠:</h4> -->
               <h4 class="h5 clearfloat">
                 <img src="../../assets/img/youhuiShop.png" style="float:left;"/>
                 <span style="float:left;">优惠</span>
               </h4>
               <div class="checkDetail clearfloat">
                 <div class="checkListAll clearfloat">
                   <el-checkbox-group v-model="checkListBase" class="checkList" disabled>
                    <el-checkbox :value="item.code" :label="item.desc" v-for="(item,index) in checkListBaseList" :key=index></el-checkbox>
                  </el-checkbox-group>
                 </div>
               </div>
            </div>
            <div class="tabDetail">
                 <ul class="clearfloat">
                   <li :class="index==1?'on':''" @click="changeOn(1)">行程路线</li>
                   <li :class="index==2?'on':''" @click="changeOn(2)">图文描述</li>
                   <li :class="index==3?'on':''" @click="changeOn(3)">购买须知</li>
                 </ul>
                 <div v-if="index==1" class="detail">
                      <p v-html="content"></p>
                 </div>
                 <div v-if="index==2" class="detail">
                      <p v-html="content2"></p>
                     
                 </div>
                 <div v-if="index==3" class="detail">
                     <p v-html="playDetail"></p> 
                 </div>
            </div>
       </div>
       <div class="disDiv" v-if="itemSrc!=''" @click="hideImg"></div>
       <div class="imgAll" v-if="itemSrc!=''" @click="hideImg">
         <img :src="itemSrc" />
       </div>
  </div>
</template>

<script>
import api from "@/fetch/url";
import {FormatDate} from '@/utils/index.js'
export default {
  data() {
    return {
       itemSrc:"",
       id:this.$route.params.id,
       checkListBaseList:"",
       projectName:"",
       projectAddress:"",
       projectDetail:"",
       projectPhone:"",
       checkListBase:["支持会员专属优惠","两人及以上下单立享9.5折优惠"],
       fileOtherPic:[],
       index:1,
       projectTitle:"",
       projectDetail:"",
       shopDate:[],
       availableDateBegin:"",
       availableDateEnd:"",
       projectPhone:"",
       content:"",
       content2:"",
       playDetail:"",
       shelfStatus:"",
       shelfStatusList:[],
       operStatus:"",
    }
  },
  created() {
 //查询优惠枚举值
      api.enumsAll({},{
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then(json => {
        if(json){
           this.checkListBaseList=json.merchSaleType;
           this.shelfStatusList = json.shelfStatus;
           api.merchDetail({
                },this.id,{
                  headers: {
                      'Content-Type': 'application/json;charset=UTF-8'
                  }
                }).then(json => {
                  if(json){
                        this.operStatus=json.shelfStatus;

                        // this.shelfStatus=json.shelfStatus;//商品上架状态
                        this.projectTitle=json.title;//商品标题
                        this.projectDetail=json.subtitle;  //商品副标题
                        this.fileOtherPic=json.merchPic;//商品图片
                        this.content=json.travelRoute;  //行程路线
                        this.content2=json.desc;  //图文描述
                        this.playDetail=json.payNotice;//购买须知

                        // this.shopDate
                        this.shopDate=[];
                        this.shopDate.push(json.availableDateBegin);
                        this.shopDate.push(json.availableDateEnd);
                        // console.log(this.shopDate,7777777);
                        this.availableDateBegin = FormatDate(new Date(Number(this.shopDate[0])),'yyyy-MM-dd'); //开始日期
                        this.availableDateEnd = FormatDate(new Date(Number(this.shopDate[1])),'yyyy-MM-dd');  //结束日期
                        this.projectPhone=json.price;//商品价格

                        // this.checkListBase=json.sales;//优惠
                         if(json.sales.length==0){
                            this.checkListBase=json.sales;
                        }else {
                          this.checkListBase=[];
                            for(let i in this.checkListBaseList){
                              for(let j in json.sales){
                                  if(this.checkListBaseList[i].code==json.sales[j]){
                                      this.checkListBase.push(this.checkListBaseList[i].desc);
                                  }
                              } 
                            }
                        }
                  }
                })
      }
    })
  },
  mounted() {
     this.init();
  },

  methods: {
    hideImg(){
      this.itemSrc="";
    },
    showImg(item){
       this.itemSrc=item.fileUrl;
    },
     init(){
        
     },
     getShelfStatus(status,desc){//获取商品状态
          // let goodsState = {};
          for(let item of this.shelfStatusList){
             switch(item.code){
                case 0://待上架
                  item.styColor = 'BeopenedStatus';
                break;
                case 1://上架中
                  item.styColor = 'upIng';
                break;
                case 9://已下架
                  item.styColor = 'closeStatus';
                break;
            };
            if(item.code == status){
              // goodsState = {
              //   desc:item.desc,
              //   styColor:item.styColor 
              // }
              if(desc=="desc"){
                  return item.desc;
              }else {
                 return item.styColor ;
              }
              
            }
          }
      },
     //tab切换
     changeOn(index){
        this.index=index;
     },
  }
}
</script>
<style lang="scss">
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  background-color: #fff;
}

.textarea .el-textarea__inner{ 
  resize: none;
  height: 150px;
}
/* .detailImgList .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
   white-space: nowrap;
} */
.app-container .el-form-item.is-success .el-input__inner:focus,.app-container .el-form-item.is-success .el-textarea__inner:focus,.app-container .el-input.is-active .el-input__inner,.app-container .el-input__inner:focus {
  border: 1px solid #FF6A00 !important;
  border-color:#FF6A00 !important;
      background-color: #fff !important;
    background: #fff !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color:#FC612A !important;
  border-color:#FC612A !important;
}
.el-checkbox__input.is-checked+.el-checkbox__label,.el-textarea__inner:focus,.el-textarea__inner:focus {
  color:#FC612A !important;
}
.addProjectApp {
  .el-breadcrumb{
    hieght:52px;
    line-height:52px;
  }
}
</style>
<style lang="scss" scoped>
  .app-container {
    padding:16px 24px 35px;
    font-size: 14px;
  }
    .addProjectApp {
     .type {
         padding:0px 30px 10px 0px;border-bottom:1px solid #E5E7EB;height:52px;line-height:52px;
     }
  }
  .header {
       width: 100%;
       min-width:1100px;
      border-radius:4px;
      background: #fff;
      padding:10px 30px 10px 0;
      box-sizing: border-box;
      .detailTop {
        width:80%;
        padding:10px 0 15px 0;
        box-sizing: border-box;
        font-size: 14px;
        color: #777777;
        line-height:20px;
         .btn {
           float: left;
           width:60px;
           height:20px;
           text-align: center;
           line-height:20px;
           color: #fff;
           font-size: 12px;
           background: #ff66cc;
           margin-top:4px;
           margin-right:5px;
         }
         .h3 {
           float: left;
         }
      }
      .detailTopNew {
        padding-top:0;
      }
      .detailImgList {
        width: 1050px;
        margin-bottom:10px;
        .font{
          padding-top:10px;
          color: #999;
          
        }
        .imgListAll {
          height:140px;
        }
        .imgList {
          float: left;
          width:200px;
          height:140px;
          margin-right:10px;
          // margin-top:10px;
          cursor: pointer;
          img {
            width:100%;
            height:100%;
          }
        }
      }
      .navList {
          // padding:5px 0;
          box-sizing: border-box;
          .h5,.input,.map {
            float: left;
          }
          .h5 {
            width:100px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #262626;
            img {
              // width:14px;
              margin-top:13px;
              margin-right:10px;
            }
            span {
              font-size: 14px;
              color: #262626;
              font-weight:normal;
            }
          }
          .input {
            height: 40px;
            line-height:40px;
            font-size: 14px;
            color: #777777;
            .price {
                 font-size: 18px;
                 color: #FC612A;
            }
          }
          .map {
            line-height:40px;
            margin-left:30px;
            color: #1890ff;
            cursor: pointer;
          }
          .textarea {
            float: left;
            width:940px;
            padding-top:10px;
            line-height: 25px;
          }
          .uploadDetail {
            float: left;
             .upload {
               width:150px;
               height: 115px;
               border: 1px solid #DCDFE6;
               border-radius: 4px;
               text-align: center;
               line-height: 115px;
               color: #ccc;
               cursor: pointer;
             }
             p {
               margin-top:20px;
               color: #ccc;
               font-size:14px;
             }
          }
          .checkDetail {
            float: left;
            width:80%;
            // background: #F7F7F9;
            border-radius: 2px;
            // padding:8px 20px 20px;
            box-sizing: border-box;
            .checkListAll {
              margin-top:20px;
              span {
                float: left;
                font-size: 14px;
                color: #262626;
              }
              .checkList {
                float: left;
                // margin-left:20px;
              }
            }
            .checkListAll:first-child{
                 margin-top:12px;
            }
          }
      }
      .tabDetail {
        padding:15px 0;
        box-sizing: border-box;
        ul {
          border-bottom: 1px solid #eee;
          li {
            float: left;
            // width:180px;
            // height: 50px;
            line-height: 30px;
            // font-size:22px;
            // font-weight: 700;
            // text-align: center;
            font-size: 14px;
            color: #262626;
            cursor: pointer;
            margin-right:40px;
          }
          li.on {
            border-bottom: 2px solid #ff6600;
          }
        }
        .detail {
          width:80%;
          padding-top:15px;
          p {
            line-height: 25px;
          }
        }
      }
  }
       .miueList {
          float: left;
          width:60px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          font-size:12px;
          color: #fff;
          margin-right:10px;
          margin-top:3px;
        };
        .upIng{
          background: #ff6600;
        }
        .closeStatus{
          background: black;
        }
        .BeopenedStatus{
          background: #f173ac;
        }
        .disDiv {
          width:100%;
          height:100%;
          background: rgba(0,0,0,0.5);
          position: fixed;
          left:0;
          top:0;
          z-index:6;
          cursor: pointer;
        }
        .imgAll {
          position: fixed;
          left:50%;
          top:50%;
          -webkit-transform:translate(-50%,-50%);
			    transform:translate(-50%,-50%);
           z-index:8;
           cursor: pointer;
        }
          .imgTop {
           position:relative;
           .icon{
             width: 84px;
             height: 32px;
             position:absolute;
             top:0;
             left:0;
             display:block;
             color: #FC612A;
             font-style: normal;
              background: rgba(252,97,42,.2);
              border-radius: 4px;
              font-size: 14px;
             font-weight: normal;
             padding-right: 10px;
             text-align: right;
             line-height: 32px;
             box-sizing: border-box;
             &::before{
               display: inline-block;
               content:'';
               width:14px;
               height: 14px;
               border-radius: 50% ;
               -webkit-border-radius: 50% ;
               -moz-border-radius: 50% ;
               -ms-border-radius: 50% ;
               -o-border-radius: 50% ;
               background: #FC612A;
               border: 2px solid #FFFFFF;
               position: absolute;
               left: 10px;
               top: 50%;
               transform: translateY(-50%);
               -webkit-transform: translateY(-50%);
               -moz-transform: translateY(-50%);
               -ms-transform: translateY(-50%);
               -o-transform: translateY(-50%);
              }
           }
           .closeStatus{
                   
            color:#777;
             background: rgba(119,119,119,.2);
           }
           .closeStatus{
            
            &::before{
              background: #777;
            }
             
           }
           .BeopenedStatus{
             color:#26A9FF;
             background: rgba(38,169,255,.2);
           }
           .BeopenedStatus{
            &::before{
              background: #26A9FF;
            }
             
           }
           .stopStatus{
             color:#FF7924;
             background: rgba(255,121,36,.2);
           }
           .stopStatus{
            &::before{
              background: #FF7924;
            }
            
           }
           img {
             display: block;
             width:100%; 
              height: 192px;
              object-fit: fill;
              background: #ccc;
           }
         }
</style>